<template>
  <el-main>
    <center><h3><b>解约协议录入</b></h3></center>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="退租物业交割单" name="first">

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="收房合同号" prop="name" label-width="150px">
                  <el-input v-model="ruleForm.id" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
              <el-button type="warning" round size="mini" @click="dialogVisible = true">收房合同查询
            </el-button>
            </span>

            <el-dialog
              title="收房合同查询"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
            <span>
              <el-table
                :data="tableData"
                style="width: 100%">
                 <el-table-column label="业主" align="center" prop="ownerName"/>
                 <el-table-column label="房产信息" align="center" prop="houseName"/>
                 <el-table-column label="签约日期" align="center" prop="conInfoTime"/>
                  <el-table-column label="操作">
                  <template slot-scope="scope">
                     <el-tag type="danger" @click="selectById(scope.row)">选中</el-tag>
                  </template>
                </el-table-column>
               </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
             </span>

            </el-dialog>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="收房合同编号" prop="sfContractNo" label-width="150px">
                  <el-input v-model="ruleForm.sfContractNo" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="房产信息" prop="premiseName" label-width="150px">
                  <el-input v-model="ruleForm.premiseName" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="产权地址" prop="cqAddress" label-width="150px">
                  <el-input v-model="ruleForm.cqAddress" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="房产证书编号" prop="houseZsNo" label-width="150px">
                  <el-input v-model="ruleForm.houseZsNo" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="业主信息" prop="ownerName" label-width="150px">
                  <el-input v-model="ruleForm.ownerName" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="业主联系方式" prop="ownerMobile" label-width="150px">
                  <el-input v-model="ruleForm.ownerMobile" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="签约人姓名" prop="signUserName" label-width="150px">
                  <el-input v-model="ruleForm.signUserName" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="签约人电话" prop="signUserMobile" label-width="150px">
                  <el-input v-model="ruleForm.signUserMobile" disabled="disabled" style="width: 200px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="物业交割日期" prop="name" label-width="150px">
                  <div class="block">
                    <el-date-picker clearable size="small" style="width: 200px"
                                    v-model="ruleForm.wyjgDate"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择物业交割日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="解约类型" prop="region" label-width="120px">
                  <el-select v-model="ruleForm.terminationType" placeholder="请选择解约类型">
                    <el-option label="合同到期" value="1"/>
                    <el-option label="业主提前解约" value="2"/>
                    <el-option label="我方退租解约" value="3"/>
                    <el-option label="其他" value="4"/>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <br>
          <el-card>
            <div class="titleitem">
              <span>&emsp;应退&emsp;</span>
              <el-button
                type="warning"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddBonuspenaltLine">
              </el-button>
            </div>
            <el-table
              :data="bonuspenaltyData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="result"
                label="类型"
                width="260">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.result" placeholder="请选择解约类型">
                    <el-option label="违约金" value="1"/>
                    <el-option label="租金" value="2"/>
                    <el-option label="冷水" value="3"/>
                    <el-option label="中水" value="4"/>
                    <el-option label="热水" value="5"/>
                    <el-option label="电" value="6"/>
                    <el-option label="燃气费" value="7"/>
                    <el-option label="保洁费" value="8"/>
                    <el-option label="维修费" value="9"/>
                    <el-option label="赔偿费" value="10"/>
                    <el-option label="卫生费" value="11"/>
                    <el-option label="配送费" value="12"/>
                    <el-option label="宽带费" value="13"/>
                    <el-option label="装修费" value="14"/>
                    <el-option label="其他" value="15"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="金额"
                width="380">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks1"
                label="备注"
                width="380">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks1"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="operate"
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDeleteBonuspenalt(scope.$index, scope.row)">
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card>
            <div class="titleitem">
              <span>&emsp;应收&emsp;</span>
              <el-button
                type="warning"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddAnnualAssessmentLine">
              </el-button>
            </div>
            <el-table
              :data="AnnualAssessmentData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="result"
                label="类型"
                width="260">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.result1" placeholder="请选择解约类型">
                    <el-option label="违约金" value="1"/>
                    <el-option label="租金" value="2"/>
                    <el-option label="冷水" value="3"/>
                    <el-option label="中水" value="4"/>
                    <el-option label="热水" value="5"/>
                    <el-option label="电" value="6"/>
                    <el-option label="燃气费" value="7"/>
                    <el-option label="保洁费" value="8"/>
                    <el-option label="维修费" value="9"/>
                    <el-option label="赔偿费" value="10"/>
                    <el-option label="卫生费" value="11"/>
                    <el-option label="配送费" value="12"/>
                    <el-option label="宽带费" value="13"/>
                    <el-option label="装修费" value="14"/>
                    <el-option label="其他" value="15"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks3"
                label="金额"
                width="380">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks3"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks4"
                label="备注"
                width="380">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks4"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="operate"
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDeleteAnnualAssessment(scope.$index, scope.row)">
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <br><br>
          <el-form-item label="备注" label-width="100px">
            <el-input type="textarea" :rows="6" style="width: 400px" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <el-form-item label="总额" prop="finalStatement" label-width="150px">
            <el-input  v-model="ruleForm.finalStatement" style="width: 200px"></el-input>
          </el-form-item>
          <center>
            <el-form-item>
              <el-button type="warning" round @click="summation()">合计</el-button>
              <el-button type="warning" round @click="resetForm('ruleForm')">重置</el-button>
              <el-button type="warning" round @click="submitForm('ruleForm')">保存</el-button>&emsp;&emsp;
            </el-form-item>
          </center>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="解约协议" name="second">



      </el-tab-pane>
    </el-tabs>



  </el-main>
</template>
<script>

import {listContract} from "@/api/renting/contract";
import {addTermination} from "@/api/renting/termination";

export default {
  name: "add",
  data() {
    return {
      activeName: 'first',
      form: [],
      options: [],
      experienceData: [],
      bonuspenaltyData: [],
      AnnualAssessmentData: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
      ruleForm: {
        finalStatement: 0,
        id: '',
        sfContractNo: '',
        houseName: '',
        cqAddress: '',
        houseZsNo: '',
        ownerName: '',
        ownerMobile: '',
        signUserName: '',
        signUserMobile: '',

      }, rules: {
        id: [
          {required: true, message: '请输入收房合同号', trigger: 'blur'},
        ],
        sfContractNo: [
          {required: true, message: '请输入收房合同编号', trigger: 'blur'},
        ],
        houseName: [
          {required: true, message: '请输入房产信息', trigger: 'blur'},
        ],
        cqAddress: [
          {required: true, message: '请输入产权地址', trigger: 'blur'},
        ],
        houseZsNo: [
          {required: true, message: '请输入房产证书编号', trigger: 'blur'},
        ],
        ownerName: [
          {required: true, message: '请输入业主信息', trigger: 'blur'},
        ],
        ownerMobile: [
          {required: true, message: '请输入业主联系方式', trigger: 'blur'},
        ],
        signUserName: [
          {required: true, message: '请输入签约人姓名', trigger: 'blur'},
        ],
        signUserMobile: [
          {required: true, message: '请输入签约人电话', trigger: 'blur'},
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    summation() {
      var sum1 = 0.0;
      for (let item of this.bonuspenaltyData) {
        if (item.remarks != null) {
          sum1 = sum1 + new Number(item.remarks)
        }
      }
      var sum = 0.0;
      for (let item of this.AnnualAssessmentData) {
        if (item.remarks3 != null) {
          sum = sum + new Number(item.remarks3)
        }
      }
      var a = sum1 - sum;
      this.ruleForm.finalStatement = 0.0;
      this.ruleForm.finalStatement = a;
    },
    selectById(row) {
      this.ruleForm.id = row.id
      this.ruleForm.sfContractNo = row.sfContractNo
      this.ruleForm.premiseName = row.premiseName
      this.ruleForm.cqAddress = row.cqAddress
      this.ruleForm.houseZsNo = row.houseZsNo
      this.ruleForm.ownerName = row.ownerName
      this.ruleForm.signUserName = row.signUserName
      this.ruleForm.ownerMobile = row.ownerMobile
      this.ruleForm.signUserMobile = row.signUserMobile
      this.dialogVisible = false
    },
    getList() {
      listContract(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addTermination(this.ruleForm).then(response => {
              this.msgSuccess("保存成功,e-mail已发送");
              this.ruleForm = {}
              this.$router.push("list2")
            }
          )
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //增加经验行
    handleAddExperienceline() {
      if (this.experienceData == undefined) {
        this.experienceData = new Array();
      }
      let obj = {};
      this.experienceData.push(obj);
    },
    //保存经验行
    handlesaveExperience(a, b) {
      console.log(a + b);
    },
    //删除经验行
    handleDeleteExperience(index) {
      console.log(index);
      this.experienceData.splice(index, 1)
    },
    //增加奖惩行
    handleAddBonuspenaltLine() {
      if (this.bonuspenaltyData == undefined) {
        this.bonuspenaltyData = new Array();
      }
      let obj = {};
      this.bonuspenaltyData.push(obj);
    },
    //保存奖惩行
    handlesaveBonuspenalt(a, b) {
      console.log(a + b);
    },
    //删除奖惩行
    handleDeleteBonuspenalt(index) {
      console.log(index);
      this.bonuspenaltyData.splice(index, 1)
    },

    //增加年度考核行
    handleAddAnnualAssessmentLine() {
      if (this.AnnualAssessmentData == undefined) {
        this.AnnualAssessmentData = new Array();
      }
      let obj = {};

      this.AnnualAssessmentData.push(obj);
    },
    //保存年度考核行
    handlesaveAnnualAssessment(a, b) {
      console.log(a + b);
    },
    //删除年度考核行
    handleDeleteAnnualAssessment(index) {
      console.log(index);
      this.AnnualAssessmentData.splice(index, 1)
    },


  }
};
</script>


